<div class="p-2">
  <div class="inline-block border border-black shadow rounded">
    <div class="px-1 border-b border-black">
      <label>
        <input
          type="checkbox"
          [checked]="table.getIsAllColumnsVisible()"
          (change)="table.getToggleAllColumnsVisibilityHandler()($event)"
        />
        Toggle All
      </label>
    </div>

    @for (column of table.getAllLeafColumns(); track column.id) {
      <div class="px-1">
        <label>
          <input
            type="checkbox"
            [checked]="column.getIsVisible()"
            (change)="column.getToggleVisibilityHandler()($event)"
          />
          {{ column.id }}
        </label>
      </div>
    }
  </div>

  <div class="h-4"></div>

  <div class="flex flex-wrap gap-2">
    <button (click)="rerender()" class="border p-1">Regenerate</button>
    <button (click)="randomizeColumns()" class="border p-1">
      Shuffle Columns
    </button>
  </div>
  <div class="h-4"></div>

  <div class="table-container">
    <table [style.width.px]="table.getTotalSize()">
      <thead>
        @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
          <tr>
            @for (header of headerGroup.headers; track header.id) {
              <!-- IMPORTANT: This is where the magic happens! -->
              <th
                [attr.colSpan]="header.colSpan"
                [ngStyle]="getCommonPinningStyles(header.column)"
              >
                <div class="whitespace-nowrap">
                  @if (!header.isPlaceholder) {
                    <ng-container
                      *flexRender="
                        header.column.columnDef.header;
                        props: header.getContext();
                        let headerValue
                      "
                    >
                      {{ headerValue }}
                    </ng-container>
                  }
                  <!-- Demo getIndex behavior -->
                  {{
                    header.column.getIndex(
                      header.column.getIsPinned() || 'center'
                    )
                  }}
                </div>

                @if (!header.isPlaceholder && header.column.getCanPin()) {
                  <div class="flex gap-1 justify-center">
                    @if (header.column.getIsPinned() !== 'left') {
                      <button
                        class="border rounded px-2"
                        (click)="header.column.pin('left')"
                      >
                        <=
                      </button>
                    }

                    @if (header.column.getIsPinned()) {
                      <button
                        class="border rounded px-2"
                        (click)="header.column.pin(false)"
                      >
                        X
                      </button>
                    }

                    @if (header.column.getIsPinned() !== 'right') {
                      <button
                        class="border rounded px-2"
                        (click)="header.column.pin('right')"
                      >
                        =>
                      </button>
                    }
                  </div>
                }

                <!-- Resize column -->
                <div
                  class="resizer"
                  [class.isResizing]="header.column.getIsResizing()"
                  (dblclick)="header.column.resetSize()"
                  (mousedown)="header.getResizeHandler()($event)"
                  (touchstart)="header.getResizeHandler()($event)"
                ></div>
              </th>
            }
          </tr>
        }
      </thead>
      <tbody>
        @for (row of table.getRowModel().rows; track row.id) {
          <tr>
            @for (cell of row.getVisibleCells(); track cell.id) {
              <td [ngStyle]="getCommonPinningStyles(cell.column)">
                <ng-container
                  *flexRender="
                    cell.column.columnDef.cell;
                    props: cell.getContext();
                    let cellValue
                  "
                >
                  {{ cellValue }}
                </ng-container>
              </td>
            }
          </tr>
        }
      </tbody>
    </table>
  </div>
</div>

<div class="h-4"></div>
<pre>{{ stringifiedColumnPinning() }}</pre>
